<!DOCTYPE html>
<html>
<head>
	<link href="../demoengine/demoengine.min.css" rel="stylesheet">
	<script src="../demoengine/demoengine.min.js" defer></script>
	<title>Google Maps: Synchronous Loading Example</title>
	<style>
		#map-div { float: left; width: 66%; height: 300px; }
		#content { float: right; width: 33%; }
		#cleared { clear: both; }
	</style>
</head>
<body>
	<div id="map-div"></div>
	<script src="//maps.googleapis.com/maps/api/js?v=3&amp;sensor=false&amp;key=AIzaSyBs1MVxS8kIxL9BXrxYE0lfvDP-iF_cmeA"></script>
	<script>
		/*
		 * Google Maps: Synchronous Loading Example
		 * http://salman-w.blogspot.com/2014/05/google-maps-asynchronous-loading.html
		 */
		google.maps.event.addDomListener(window, "load", function() {
			var map = new google.maps.Map(document.getElementById("map-div"), {
				center: new google.maps.LatLng(33.810890, -117.918772),
				zoom: 16,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			});
		});
	</script>
	<div id="content">
		<p>The objective is to show the content as quickly as possible without blocking the page. This example fails at that.</p>
		<p>The elements appear in the following order:</p>
		<ul>
			<li>Map Div</li>
			<li>Maps API JavaScript &mdash; it can be placed anywhere including document head and bottom of page; it blocks the page</li>
			<li>Map Initialization JavaScript &mdash; executed on window load</li>
		</ul>
	</div>
	<div id="cleared"></div>
</body>
</html>
